@use '../utils/box-shadow_variables';
@use '../utils/color_variables';
@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.transit-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 0.2fr));
  grid-template-rows: 1fr;
  align-content: start;
  grid-gap: 2rem;
  margin-top: size_variables.$spacing-24;
}

.transit-card {
  border-radius: size_variables.$radius;
  box-shadow: 0 0 0 1px rgba(color_variables.$grey-light, 0.4);
  display: grid;
  grid-template-columns: 0.45fr 2fr;
  padding: size_variables.$spacing-16;
  border: none;

  .transit-icon {
    justify-self: center;
  }

  .transit-action-description {
    font-family: font_variables.$family-sans;
    font-size: size_variables.$size-8;
    color: color_variables.$grey;
  }

  .title {
    color: color_variables.$grey;
    font-size: size_variables.$size-7;
    margin-bottom: size_variables.$spacing-4;
  }

  &:hover {
    box-shadow:
      0 0 0 1px color_variables.$blue-500,
      box-shadow_variables.$box-shadow-middle;
    background: color_variables.$blue-010;

    .title {
      color: initial;
    }
  }
}
